<template>
  <div>
    <a-card title="商品信息" style="width: 80%">
      <a slot="extra" href="#">more</a>
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="选择分类">
          <a-cascader :options="options" placeholder="Please select" @change="onChange" />
   
        </a-form-model-item>
        <a-form-model-item label="商品品牌">
          <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="原价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="现价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品简介">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品相册">
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-model-item>
        <a-form-model-item label="商品详情">
          <a-input v-model="form.name" />
        </a-form-model-item>
        </a-form-model>
    </a-card>
    
    <a-card title="商品属性" style="width: 80%;margin-top: 10px;">
      <a slot="extra" href="#">more</a>
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="选择分类">
          <a-cascader :options="options" placeholder="Please select" @change="onChange" />
   
        </a-form-model-item>
        <a-form-model-item label="商品品牌">
          <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="原价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="现价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品简介">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品相册">
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-model-item>
        <a-form-model-item label="商品详情">
          <a-input v-model="form.name" />
        </a-form-model-item>
        </a-form-model>
    </a-card>

    <a-card title="设置库存" style="width: 80%;margin-top: 10px;">
      <a slot="extra" href="#">more</a>
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="选择分类">
          <a-cascader :options="options" placeholder="Please select" @change="onChange" />
   
        </a-form-model-item>
        <a-form-model-item label="商品品牌">
          <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="原价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="现价">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品简介">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品相册">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="商品详情">
          <a-input v-model="form.name" />
        </a-form-model-item>
        </a-form-model>
    </a-card>
  </div>
</template>

<script>



export default {
  name: 'GoodsUp',
  components: {},
  data () {
    return {
   
      previewVisible: false,
      previewImage: '',
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-5',
          name: 'image.png',
          status: 'error',
        },
      ]
    }
  },
  authorize: {
    deleteRecord: 'delete'
  },
  created(){
   
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
    onChange(value) {
      console.log(value);
    },
  
  }
}
</script>

<style lang="less" scoped>
  a-card {
   margin-top: 10px;  
  }
</style>
